'use strict'
import React, { Component } from 'react';
import Label from '../label/index';
import Color from '../../config/theme/standard/color';
import fontSize from '../../config/theme/standard/fonts.js';
import {
    View,
    TextInput,
    TouchableOpacity,
    StyleSheet,
    ScrollView,
    TouchableHighlight,
    Image,
    Platform,
    Text,
    WebView,
    Dimensions
} from 'react-native';

class HintContainer extends Component {
    static displayName = 'HintContainer';

    constructor(props) {
        super(props);
        this.state = {
            visible: this.props.visible,
            prevPropsVisible: this.props.visible,
        };
    };

    static getDerivedStateFromProps(nextProps, prevState) {
        if (('visible' in nextProps) && (nextProps.visible !== prevState.prevPropsVisible)) {
            return {
                prevPropsVisible: nextProps.visible,
                visible: nextProps.visible,
            };
        }
        return null;
    }




    _open = () => {
        this.setState({
            visible: true,
        });
    }

    _close = () => {
        this.setState({
            visible: false,
        });
    }




    componentDidMount() {
        const { switchTimeNumber, switchTime } = this.props

        switchTime ? this.setTimes = setTimeout(() => {
            this.setState({
                visible: false
            })
        }, switchTimeNumber * 1000) : null

    }

    componentWillUnmount() {
        this.setTimes && clearTimeout(this.setTimes)
    }

    render() {
        if (!this.state.visible) {
            return null;
        }
        const sWidth = Dimensions.get('window').width;
        const { title, margins, location, radius } = this.props
        let images = null
        const { iconPosition } = this.props
        if (iconPosition === 'left') {
            images = (<Image
                style={[{ position: 'absolute', top: 20, left: 5, width: 7, height: 11}, Platform.OS == 'harmony' &&{ zIndex:1 }]}
                source={require('../../assets/hint_left.png')}
            />)
        } else if (iconPosition === 'right') {
            images = (<Image
                style={[{ position: 'absolute', top: 20, right: 5, width: 7, height: 11 }, Platform.OS == 'harmony' &&{ zIndex:1 }]}
                source={require('../../assets/hint_right.png')}
            />)
        } else if (iconPosition === 'top') {
            images = (<Image
                style={[{ position: 'absolute', top: 5, width: 11, height: 7 }, margins.left ? { left: margins.left } : { right: margins.right }, Platform.OS == 'harmony' &&{ zIndex:1 }]}
                source={require('../../assets/hint_top.png')}
            />)
        } else if (iconPosition === 'bottom') {
            images = (<Image
                style={[{ position: 'absolute', bottom: 4, width: 11, height: 7 }, margins.left ? { left: margins.left } : { right: margins.right }, Platform.OS == 'harmony' &&{ zIndex:1 }]}
                source={require('../../assets/hint_bottom.png')}
            />)
        }


        return (
            <View style={[styles.maskStyle, {

                top: location[0] - 10,
                left: location[1] - 10

            }]}>
                <View style={{ padding: 11, position: 'relative' }}>

                    {images}
                    <View style={{
                        height: 28,
                        backgroundColor: 'rgba(0, 0, 0, 0.6)',
                        paddingLeft: 10,
                        paddingRight: 10,
                        paddingBottom: 5,
                        paddingTop: 5,
                        alignItems: 'center',
                        flexDirection: 'row',
                        justifyContent: 'center',
                        borderRadius: radius,
                    }}>
                        <Label text={title.length > 25 ? title.slice(0, 25) : title} labelStyle={{color:Color.hint.title,fontSize:fontSize.hint.titleFontSize,fontWeight:'400'}} onPress={() => { this._close() }} />
                    </View>
                </View>
            </View>
        )

    };
};

HintContainer.defaultProps = {
    title: '提示标题',
    visible: false,
    switchTime: false,
    switchTimeNumber: 3,
    margins: { left: 50 },
    location: [200, 0],
    radius: 4
}

const styles = StyleSheet.create({
    maskStyle: {
        position: Platform.OS == "web" ? "fixed" : 'absolute',
        height: 58,
    }
});

export default HintContainer;